package myJs.test

import myJs.api.Api
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import org.scalajs.dom.Event
import shared.pojo.Pojo.LoginUserData

import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import scala.scalajs.js
import scala.scalajs.js.JSON

import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._

/**
 * Created by yz on 3/11/2020
 */
object Cp {

  type Props = Unit

  val Component = ScalaFnComponent[Props] { props =>

    val useForm = ReactHookForm.useForm(UseFormOptions())
    val nameRegister = useForm.register("exampleRequired", RegisterOptions(required = ValidationValueMessage(value = true, message = "not empty")))
    val myV = useForm.watch("exampleRequired")

    object FTool {

      def update = SyncIO{
        useForm.setValue("exampleRequired", "789")
      }

    }

    div(

      form(
        onSubmit := {
          useForm.handleSubmit((data: js.Any) => {
            println(JSON.stringify(data))
          })
        },
//        Controller(
//          control = useForm.control,
//          name = "exampleRequired",
//          render = (fieldR: FieldR) => {
//            val field = fieldR.field
//            println(field.value)
//            input(
//              name := field.name,
//              ref := field.ref,
//              value := field.value.getOrElse(""),
//              onChange := field.onChange
//            )()
//          }
//
//        ),

        //        input(name := nameRegister.name, onChange := { (e: SyntheticEvent[TagElement#RefType, Event]) => {
        //          nameRegister.onChange(e)
        //          ()
        //        }
        //        }, ref := nameRegister.ref, onBlur := { (e: SyntheticEvent[TagElement#RefType, Event]) => {
        //          //          nameRegister.onBlur.toFuture.foreach { f =>
        //          //            f(e)
        //          //          }
        //          ()
        //        }
        //        }),
        if (useForm.formState.errors.isDefinedAt("exampleRequired")) {
          span("This field is required")
        } else {
          EmptyVdom
        },
        button(onClick --> FTool.update, "Update"),
        input(`type` := "submit")
      )

    )


  }

}



